<template>
	<div class="ui-shade" v-show="isShow"  @click="changisshow">
		<div class="modal_cont" :class="isShow ? 'silderout':''" @click.stop="changisshow()">
			<div class="page_modal" @click.stop>
				<div id="geuige">
					<div class="cose_modal" @click="changisshow()"><span>×</span></div>
					<div class="goods_intro flex-star">
						<img src="asset/img/goods_img.png">
						<div class="goods_info">
							<div class="goods_price">{{price}}</div>
							<div class="kucun">库存<span>{{num}}</span>件</div>
							<div class="checkre flex-star">
								<span>已选:</span>
								<div>{{showAttr}}</div>
							</div>
						</div>
					</div>

					<div v-for="(item,itemindex) in goods.SKUInfo" class="chose_item">
						<p class="chose_item_tit">{{item.name}}</p>
						<div class="chose_item_cont flex-star">
							<div v-for="(attr,attrindex) in item.items" v-on:click="specificationBtn(attr.name,itemindex,attrindex)"
							 v-bind:class="[attr.isShow?'':'noneActive',subIndex[itemindex] == attrindex?'productActive':'']">
								{{attr.name}}
							</div>
						</div>
					</div>

					<div class="num_opt flex-between">
						<span>购买数量</span>
						<div class="numopt flex-star">
							<div class="add">-</div>
							<div>2</div>
							<div class="reduce">+</div>
						</div>
					</div>
					<div class="btn_cont flex-star">
						<input type="button" name="" id="" value="加入购物车" />
						<input type="button" name="" id="" value="马上抢" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				selectArr: [], //存放被选中的值
				showAttr: "",
				num: 0,
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
				price: '' //选中规格的价钱
			}
		},
		props:{
			isShow:{
				type:Boolean,
				default:false
			},
			goods:{
				type:Object,
				required:true
			}
		},
		created: function() {
			var self = this;
			for (var i in self.goods.priceInfo) {
				self.shopItemInfo[self.goods.priceInfo[i].difference] = self.goods.priceInfo[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
			}
			self.checkItem();
			// self.specificationBtn("黑色",0,0)
		},
		methods: {
			changisshow(e) {
				this.$emit("click",e)
			},
			specificationBtn: function(item, n, index) {
				var self = this;

				console.info(self.selectArr[n] + "66666" + item)
				if (self.selectArr[n] != item) {
					self.selectArr[n] = item;
					self.subIndex[n] = index;

				} else {
					self.selectArr[n] = undefined;
					self.subIndex[n] = -1; //去掉选中的颜色 
				}

				var showarr = self.selectArr;
				var tempTop = [];
				showarr.forEach((item, i, arr) => {
					if (item) {
						tempTop.push(item)
					}
				})

				self.showAttr = tempTop.join(";");
				self.checkItem();
				tempTop = []
			},
			checkItem: function() {
				var self = this;
				var option = self.goods.SKUInfo;
				var result = []; //定义数组存储被选中的值
				for (var i in option) {
					result[i] = self.selectArr[i] ? self.selectArr[i] : '';
				}
				console.log(result);

				if (self.shopItemInfo[result.join(";")]) {
					self.num = self.shopItemInfo[result.join(";")].stock;
					self.price = "￥" + (self.shopItemInfo[result.join(";")].price).toFixed(2);
				} else {
					self.num = 0;
					self.price = "￥0.00";
				}


				for (var i in option) {
					var last = result[i]; //把选中的值存放到字符串last去
					for (var k in option[i].items) {
						result[i] = option[i].items[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
						option[i].items[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
					}

					console.info(last)
					result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
				}
				self.$forceUpdate(); //重绘
			},
			isMay: function(result) {
				for (var i in result) {
					if (result[i] == '') {
						return true; //如果数组里有为空的值，那直接返回true
					}
				}
				if (this.shopItemInfo[result.join(";")]) { //匹配选中的数据的库存，若不为空返回true反之返回false
					return this.shopItemInfo[result.join(";")].stock == 0 ? false : true;
				}
			}
		}
	}
</script>

<style scoped="scopedss">
	.page_modal {
		width: 100%;
		background: linear-gradient(to right, #fff, #fff) 0 .2rem no-repeat;
		background-size: 100% auto;
		color: #222;
		position: absolute;
		bottom: 0;
	}

	.goods_intro {
		padding: 0 .25rem;
	}

	.goods_intro img {
		width: 2rem;
		height: 2rem;
		border: 3px solid #fff;
		border-radius: 4px;
		box-shadow: 0 0 6px rgba(0, 0, 0, .3);
	}

	.goods_info {
		margin-left: .15rem;
	}

	.goods_price {
		color: #feab27;
		font-size: .34rem;
	}

	.kucun {
		margin: .05rem 0;
	}

	.num_opt {
		width: calc(100% - .5rem);
		margin: 0 .25rem;
		padding: .25rem 0;
		border-bottom: 1px solid #eeeeee;
	}

	.numopt div {
		width: .7rem;
		height: .6rem;
		background: #f5f5f5;
		text-align: center;
		line-height: .6rem;
		color: #666;
	}

	.numopt div:nth-child(2) {
		margin: 0 .08rem;
		background: white;
		color: #333;
	}

	.chose_item {
		width: calc(100% - .5rem);
		margin: 0 .25rem;
		border-bottom: 1px solid #eeeeee;
		padding-top: .3rem;
	}

	.chose_item_cont {
		margin-top: .2rem;
	}

	.chose_item_cont div {
		padding: .12rem .24rem;
		background: #f6f4f5;
		border-radius: 5px;
		margin-bottom: .2rem;
	}

	.chose_item_cont div:nth-child(n + 2) {
		margin-left: .2rem;
	}

	.chose_item .chose_item_tit {
		font-size: .3rem;
		font-weight: bold;
	}

	.ui-shade {
		display: flex;
	}

	.silderout {
		display: block;
		bottom: 0;
		animation: silderout .25s;
	}

	.btn_cont input {
		height: .8rem;
		width: 50%;
		border: none;
		color: white;
	}

	.btn_cont input:nth-child(1) {
		background: #ff9e01;
		border-radius: .8rem 0 0 .8rem;
	}

	.btn_cont input:nth-child(2) {
		background: #ff6f00;
		border-radius: 0 .8rem .8rem 0;
	}

	.btn_cont {
		width: calc(100% - .5rem);
		margin: 0 .25rem;
		padding: .15rem 0;
	}

	.productActive {
		background: #feab27 !important;
		color: white;
	}

	.cose_modal {
		position: absolute;
		width: .4rem;
		top: .4rem;
		height: .4rem;
		border: 1px solid #615763;
		border-radius: 50%;
		right: .2rem;
		line-height: .4rem;
		text-align: center;
	}

	@keyframes silderout {
		from {
			bottom: -100vh;
		}

		to {
			bottom: 0;
		}
	}

	@keyframes silderin {
		from {
			bottom: vh;
		}

		to {
			bottom: -100vh;
		}
	}

	.modal_cont {
		position: absolute;
		height: 100vh;
		width: 100vw;
	}

	.noneActive {
		background-color: #ccc;
		opacity: 0.4;
		color: #000;
		pointer-events: none;
	}
</style>
